/* 全局样式 */
body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #1a1a1a, #000033);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  overflow: hidden;
}

/* 容器样式 */
.app {
  text-align: center;
  background-color: rgba(42, 42, 42, 0.8);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  max-width: 1000px; /* 增加宽度 */
  width: 100%;
  position: relative;
  z-index: 1;
}

/* 主要内容样式 */
.main-content {
  display: flex;
  gap: 2rem; /* 左右面板之间的间距 */
  margin-top: 2rem;
}

.left-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.right-panel {
  flex: 1;
  max-width: 800px; /* 右侧面板宽度 */
}

/* 捐赠者名单容器 */
.donor-list-container {
  max-height: 300px; /* 设置最大高度 */
  overflow-y: auto; /* 添加垂直滚动 */
  border: 1px solid #00ffcc;
  border-radius: 5px;
  padding: 1rem;
  background-color: rgba(0, 0, 0, 0.5);
}

.donor-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.donor-list li {
  margin: 0.5rem 0;
  color: #cccccc;
}

/* 标题样式 */
.header h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #00ffcc;
}

.header p {
  font-size: 1.2rem;
  color: #cccccc;
}

/* 页脚样式 */
.footer {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #888888;
}

/* 测试网链接样式 */
.testnet-link {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #cccccc;
}

.testnet-link a {
  color: #00ffcc;
  text-decoration: none;
}

.testnet-link a:hover {
  text-decoration: underline;
}

/* 星空背景 */
.stars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 0;
  overflow: hidden;
}

.stars::before,
.stars::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  animation: twinkle 3s infinite;
}

.stars::before {
  box-shadow: 100px 200px white, 300px 400px white, 500px 100px white,
    700px 300px white, 900px 150px white, 1200px 50px white, 1500px 250px white,
    1800px 350px white, 200px 500px white, 400px 600px white, 600px 700px white,
    800px 800px white, 1000px 900px white, 1200px 1000px white;
}

.stars::after {
  box-shadow: 50px 150px white, 250px 350px white, 450px 50px white,
    650px 250px white, 850px 450px white, 1050px 650px white, 1250px 850px white,
    1450px 1050px white, 1650px 1250px white, 1850px 1450px white;
  animation-delay: 1.5s; /* 延迟动画 */
}

@keyframes twinkle {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}